<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="../extras/camera.js"></script>
<script type="text/javascript" src="../extras/path.js"></script>
<script type="text/javascript" src="../extras/pathshapes.js"></script>
<script type="text/javascript" src="../extras/curvetube.js"></script>
<script type="text/javascript" src="../extras/frame.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
<script type="text/javascript" src="../extras/meshjson.js"></script>
<script type="text/javascript" src="pathutil.js"></script>
<script src="https://peteroupc.github.io/colorpicker/cbox.js"></script>
</head>
<body>
<p style="position:absolute;left:0;top:1em">
<a href="javascript:sampleShape(0)">Plane</a>,
<a href="javascript:sampleShape(1)">Extruded</a>,
<a href="javascript:sampleShape(2)">Closed figure</a>,
<a href="javascript:sampleShape(3)">Tube</a>,
<a href="javascript:sampleShape(4)">Octagon Figure</a>,
<a href="javascript:sampleShape(5)">Nine-Pointed Star Figure</a>,
<a href="javascript:sampleShape(6)">Nine-Pointed Star Path</a>,
<a href="javascript:sampleShape(7)">Rounded Rectangle Figure</a>,
<a href="javascript:sampleShape(8)">Arrow Figure</a>
<br>
Color: <input type=color value="#E0E0E0" id=colorsetting><br>
</p>
<canvas id=canvas></canvas>
<script id="demo">
/* global H3DU, makeAxisLines, makeTubeFromPath, pathFloor */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/
// Make a polygon with a hole
var path = new H3DU.GraphicsPath()
 .moveTo(-1, 1, 0)
 .lineTo(0, 1)
 .arcTo(1, 1, 1, 0, 1)
 .lineTo(1, -1)
 .lineTo(0, -1)
 .arcTo(-1, -1, -1, 0, 1)
 .closePath().reverse();
var path2 = new H3DU.GraphicsPath()
 .moveTo(-0.5, 0.5, 0)
 .lineTo(-0.5, 0)
 .arcTo(-0.5, -0.5, 0, -0.5, 0.5)
 .lineTo(0.5, -0.5)
 .lineTo(0.5, 0)
 .arcTo(0.5, 0.5, 0, 0.5, 0.5)
 .lineTo(-0.5, 0.5)
 .closePath().reverse();
path = path.merge(path2);

function makeLinePath(path, z, flatness) {
  "use strict";
  var lines = path.getLines(flatness);
  var mesh = new H3DU.Mesh().mode(H3DU.Mesh.LINES);
  for(var i = 0; i < lines.length; i++) {
    var line = lines[i];
    mesh.vertex3(line[0], line[1], z).vertex3(line[2], line[3], z);
  }
  return mesh.toMeshBuffer();
}
function extrudePath(path, zStart, zEnd, flatness) {
  "use strict";
  var lines = path.getLines(flatness);
  var mesh = new H3DU.Mesh().mode(H3DU.Mesh.TRIANGLES);
  var z1 = Math.min(zStart, zEnd);
  var z2 = Math.max(zStart, zEnd);
  for(var i = 0; i < lines.length; i++) {
    var line = lines[i];
    var dx = line[2] - line[0];
    var dy = line[3] - line[1];
    var dot = dx * dx + dy * dy;
    if(dot === 0)continue;
    mesh.vertex3(line[0], line[1], z1)
   .vertex3(line[2], line[3], z1)
   .vertex3(line[0], line[1], z2)
   .vertex3(line[2], line[3], z1)
   .vertex3(line[2], line[3], z2)
   .vertex3(line[0], line[1], z2);
  }
  return mesh.toMeshBuffer().recalcNormals(true);
}
function pathClosedFigure(path, zBottom, zTop, flatness) {
  "use strict";
  var mesh = new H3DU.MeshBuffer();
  mesh.merge(extrudePath(path, zBottom, zTop, flatness));
  mesh.merge(pathFloor(path, zTop, flatness));
  mesh.merge(pathFloor(path, zBottom, flatness).reverseWinding().reverseNormals());
  return mesh;
}
function createSampleShape(index) {
  "use strict";
  switch(index) {
  case 0:
     return pathFloor(path, 0, 0.01);
  case 1:
    return extrudePath(path, -0.2, 0.2, 0.01);
  case 2:
    return pathClosedFigure(path, -0.25, 0.25, 0.01);
  case 3:
   return makeTubeFromPath(path, 0.01, 0.1);
  case 4: {
    var p = new H3DU.GraphicsPath().regularPolygon(0, 0, 8, 1);
    return pathClosedFigure(p, -0.25, 0.25, 0.01);
  }
  case 5: {
    p = new H3DU.GraphicsPath().regularStar(0, 0, 9, 1, 0.8);
    return pathClosedFigure(p, -0.25, 0.25, 0.01);
  }
  case 6: {
    p = new H3DU.GraphicsPath().regularStar(0, 0, 9, 1, 0.8);
    return makeLinePath(p, 0, 0.01);
  }
  case 7: {
    p = new H3DU.GraphicsPath().roundRect(-1.0, -1.0, 2.0, 2.0, 0.3, 0.3);
    return pathClosedFigure(p, -0.25, 0.25, 0.01);
  }
  case 8: {
    p = new H3DU.GraphicsPath().arrow(0, -1.0, 0, 1.0, 0.55, 0.6, 0.3);
    return pathClosedFigure(p, -0.25, 0.25, 0.01).recalcNormals(true);
  }
  default:
    return new H3DU.Mesh();
  }
}
var sub = null;
var shape = null;
function sampleShape(num) {
  "use strict";
  if(shape)sub.removeShape(shape);
  var cs = document.getElementById("colorsetting").value;
  sub.addShape(shape = new H3DU.Shape(createSampleShape(num)).setColor(cs));
}

  // Create the 3D scene; find the HTML canvas and pass it
  // to Scene3D.
var scene = new H3DU.Scene3D(document.getElementById("canvas"));
scene.setClearColor("white");
sub = new H3DU.Batch3D();
var camera = new H3DU.Camera(sub, 45, 1, 1000).setDistance(5)
   .moveAngleVertical(-90);
var input = new H3DU.InputTracker(scene.getCanvas());
var pc = new H3DU.FrameCounterDiv();
shape = null;
document.getElementById("colorsetting").addEventListener("change",
   function(e) {
     "use strict";
     if(shape)shape.setColor(e.target.value);
   });
sub.addShape(makeAxisLines());
sampleShape(3);
H3DU.renderLoop(function() {
  "use strict";
  pc.update();
  camera.update(input.update());
  sub.getLights().setDirectionalLight(0, camera.getPosition());
  scene.render(sub);
});
// -->
</script>
</body>
